<template>
  <div class="useLongtimeAima" id="aniam_dom"></div>
  <button class="clickme" id="clickme">点我 反转</button>
</template>

<script setup>
import { onMounted } from 'vue';
import { normalizeContainer } from '../global/element/Func';
import { addEvent } from '../global/element/Event/Func/add_remove_eventListen';
onMounted(() => {
  let clickme_dom = normalizeContainer('clickme');
  let aniam_dom = normalizeContainer('aniam_dom');
  addEvent(clickme_dom, 'click', () => {
    let animations = aniam_dom.getAnimations();
    console.log(animations);
    animations.forEach((anima) => {
      // anima.pause();
      anima.reverse();
    });
  });
});
</script>

<style scoped lang="scss"></style>

<style>
.useLongtimeAima {
  position: absolute;

  width: 100px;
  height: 200px;
  background-color: #290d0d;

  animation-name: jkl666, big666;
  animation-duration: 7s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes jkl666 {
  0% {
    top: 0px;
    left: 0px;
  }
  100% {
    top: 600px;
    left: 300px;
  }
}

@keyframes big666 {
  to {
    transform: scale(1.6);
  }
}
</style>
